<template>
  <div class="categoryContainer">
    <!-- 头部 -->
    <div class="header">
      <div class="input" @click="toSearch">
        <div class="col">
          <van-icon name="search" class="left" size="20" />
          <div class="right">搜索商品, 共109819款好物</div>
        </div>
      </div>
    </div>

    <div class="left">
      <div class="acca">
        <div class="head">
          <div
            class="headItem"
            v-for="(category, index) in categoryList.categoryL1List"
            :key="category.id"
            @click="getList(category.id)"
          >
            {{ category.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="bableright" v-if="activeKey">
      <!-- 第一页轮播图 -->
      <div class="swiper">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item
            v-for="(banner, index) in currentCategorya.bannerList"
            :key="banner.id"
            ><img class="Img" :src="banner.picUrl" alt=""
          /></van-swipe-item>
        </van-swipe>
      </div>
      <!-- 第一页下面 -->
      <div class="list">
        <div
          class="item"
          v-for="(category, index) in categoryList.categoryL2List"
          :key="category.id"
        >
          <img class="Img" :src="category.bannerUrl" alt="" />
          <div class="itemText">{{ category.name }}</div>
        </div>
      </div>
    </div>
    <div class="bableBottom" v-else>
      <!-- 第一页轮播图 -->
      <div class="swiper">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item
            ><img
              class="Img"
              src="https://yanxuan.nosdn.127.net/b0e5be94403d5a48e541765e3165fa10.png?type=webp&imageView&quality=75&thumbnail=0x196"
              alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img
              class="Img"
              src="https://yanxuan.nosdn.127.net/b0e5be94403d5a48e541765e3165fa10.png?type=webp&imageView&quality=75&thumbnail=0x196"
              alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img
              class="Img"
              src="https://yanxuan.nosdn.127.net/b0e5be94403d5a48e541765e3165fa10.png?type=webp&imageView&quality=75&thumbnail=0x196"
              alt=""
          /></van-swipe-item>
        </van-swipe>
      </div>
      <!-- 下半 -->
      <div class="cartList" v-for="(cate, index) in cateList" :key="cate.id">
        <div class="hd">{{ cate.name }}</div>
        <div class="cd">
          <div
            class="cdItem"
            v-for="(category, index) in cate.categoryList"
            :key="category.id"
            @click="toGoodsList(category.id, category.superCategoryId)"
          >
            <img class="Img" :src="category.wapBannerUrl" alt="" />
            <div class="itemText">{{ category.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  name: "Category",
  data() {
    return {
      activeKey: 1,
      accentId: 0,
      cateList1: [],
    };
  },
  computed: {
    ...mapState({
      categoryList: (state) => state.Category.categoryList,
      cateList: (state) => state.Category.cateList,
    }),
    ...mapGetters(["currentCategorya"]),
  },
  mounted() {
    this.getcategoryList();
  },
  methods: {
    getcategoryList() {
      this.$store.dispatch("getcategoryList");
    },
    toSearch() {
      this.$router.push({
        path: "/search",
        query: {
          redirect: "/category",
        },
      });
    },
    // 请求右侧
    async getList(id) {
      this.activeKey = 0;
      await this.$store.dispatch("getCateList", id);
      console.log("222", id);
      console.log(this.cateList);
    },

    toGoodsList(subCategoryId, categoryId) {
      this.$router.push({
        path: "/goods-list",
        query: { subId: subCategoryId, Id: categoryId },
      });
      // console.log(subCategoryId, categoryId);
    },
  },
};
</script>

<style lang="less" scoped>
.categoryContainer {
  width: 100%;
  height: 100%;
  position: relative;
  .header {
    height: 44px;
    width: 100%;
    background-color: white;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    .input {
      width: 345px;
      height: 28px;
      background-color: #ededed;
      border-radius: 5px;
      .col {
        // text-align: center;
        // line-height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 3px;
        .left {
          width: 20px;
          height: 20px;
          color: #8d8d8d;
          font-size: 10px;
        }
        .right {
          color: #666666;
          font-size: 14px;
        }
      }
    }
  }
  .left {
    width: 81px;
    height: 1600px;
    border-right: 1px solid #dcdcdc;
    .acca {
      height: 425px;
      width: 81px;
      // background-color: red;
      display: flex;
      align-items: center;
      .head {
        height: 375px;
        width: 81px;
        // background-color: skyblue;
        .headItem {
          text-align: center;
          line-height: 25px;
          margin-bottom: 20px;
          height: 25px;
          width: 81px;
          // background-color: green;
          font-size: 14px;
        }
      }
    }
  }
  .bableright {
    width: 293px;
    height: 600px;
    // background-color: red;
    position: absolute;
    top: 44px;
    right: 0;
    .swiper {
      margin-left: 10px;
      margin-top: 10px;
      width: 264px;
      height: 96px;
      .my-swipe {
        width: 264px;
        height: 96px;
        .van-swipe-item {
          width: 264px;
          height: 96px;
          .Img {
            width: 264px;
            height: 96px;
          }
        }
      }
    }
    .list {
      width: 274px;
      height: 324px;
      // background-color: skyblue;
      margin-left: 15px;
      margin-top: 15px;
      display: flex;
      flex-wrap: wrap;
      .item {
        margin-right: 19px;
        width: 72px;
        height: 108px;
        // background-color: green;
        .Img {
          width: 72px;
          height: 72px;
        }
        .itemText {
          font-size: 12px;
          text-align: center;
        }
      }
    }
    .my-swipe .van-swipe-item {
      line-height: 150px;
      text-align: center;
    }
  }
  .bableBottom {
    width: 293px;
    height: 600px;
    // background-color: red;
    position: absolute;
    top: 44px;
    right: 0;
    .swiper {
      margin-left: 15px;
      margin-top: 10px;
      width: 264px;
      height: 96px;
      .my-swipe {
        width: 264px;
        height: 96px;
        .van-swipe-item {
          width: 264px;
          height: 96px;
          .Img {
            width: 264px;
            height: 96px;
          }
        }
      }
    }
    .cartList {
      display: flex;
      flex-wrap: wrap;
      margin-left: 15px;
      margin-top: 20px;
      width: 264px;
      // height: 146px;
      // background-color: skyblue;
      .hd {
        margin-top: 2px;
        width: 264px;
        height: 26px;
        // background-color: green;
        font-size: 14px;
        font-weight: 1000;
        border-bottom: 1px solid #e1e1e1;
      }
      .cd {
        width: 264px;
        // height: 108px;
        display: flex;
        flex-wrap: wrap;
        // background-color: yellow;
        // margin-top: 10px;
        .cdItem {
          width: 72px;
          height: 108px;
          margin: 0 6px;
          // background-color: red;
          .Img {
            height: 72px;
          }
          .itemText {
            text-align: center;
            height: 36px;
            width: 72px;
            // background-color: pink;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
